<template>
  <div class="evaluation-result" v-loading="loading">
    <div class="result-card" v-if="result">
      <div class="result-header">
        <h2>测评结果</h2>
      </div>

      <div class="result-content">
        <div class="score-section">
          <div class="score">
            <span class="number">{{ result.totalScore }}</span>
            <span class="label">总分</span>
          </div>
          <div class="level">
            评估等级：<span :class="result.level.toLowerCase()">{{ getLevelText(result.level) }}</span>
          </div>
        </div>

        <div class="evaluation-section">
          <h3>评估结论</h3>
          <p>{{ result.evaluation }}</p>
        </div>

        <div class="suggestions-section">
          <h3>改善建议</h3>
          <ul>
            <li v-for="(suggestion, index) in result.suggestions" :key="index">{{ suggestion }}</li>
          </ul>
        </div>

        <!-- AI分析结果 -->
        <div v-if="aiResult || aiLoading" class="ai-analysis-section">
          <h3>AI智能分析</h3>
          <div v-if="aiLoading" class="ai-loading">
            <div class="loading-animation">
              <el-icon class="analyzing-icon" :size="24"><Monitor /></el-icon>
              <div class="dots">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
            <div class="loading-text">AI正在分析中，请稍候...</div>
          </div>
          <div v-else class="ai-result">
            <div class="ai-part">
              <h4>分析结果</h4>
              <ul>
                <li v-for="(item, index) in aiResult.result" :key="'result-'+index">{{ item }}</li>
              </ul>
            </div>
            <div class="ai-part">
              <h4>建议</h4>
              <ul>
                <li v-for="(item, index) in aiResult.comments" :key="'comment-'+index">{{ item }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="result-footer">
        <el-button type="primary" @click="backToList">返回列表</el-button>
        <el-button 
          type="success" 
          :loading="aiLoading"
          @click="handleAiAnalysis"
        >
          <el-icon><Monitor /></el-icon>
          AI智能分析
        </el-button>
      </div>
    </div>

    <el-empty v-else-if="!loading" description="暂无测评结果"></el-empty>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Monitor } from '@element-plus/icons-vue'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const result = ref(null)
const aiLoading = ref(false)
const aiResult = ref(null)

// 获取测评结果
const fetchResult = async () => {
  loading.value = true
  try {
    const { data } = await request.get(`/admin/scales/${route.params.id}/result`)
    result.value = data
  } catch (error) {
    console.error('Error fetching result:', error)
    ElMessage.error('获取结果失败')
  } finally {
    loading.value = false
  }
}

// 返回量表列表
const backToList = () => {
  router.push('/evaluation')
}

// 等级文字转换
const getLevelText = (level) => {
  const levelMap = {
    'NORMAL': '正常',
    'MILD': '轻度',
    'MODERATE': '中度',
    'SEVERE': '严重'
  }
  return levelMap[level] || level
}

const handleAiAnalysis = async () => {
  if (aiLoading.value) return
  
  aiLoading.value = true
  try {
    const { data } = await request.get(`/admin/scale/record/ai/${route.params.id}`, {
      timeout: 60000  // 设置超时时间为1分钟
    })
    aiResult.value = data
    ElMessage.success('AI分析完成')
  } catch (error) {
    console.error('Error getting AI analysis:', error)
    if (error.code === 'ECONNABORTED') {
      ElMessage.error('AI分析超时，请稍后重试')
    } else {
      ElMessage.error('AI分析失败')
    }
  } finally {
    aiLoading.value = false
  }
}

onMounted(() => {
  fetchResult()
})
</script>

<style scoped>
.evaluation-result {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.result-card {
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.result-header {
  text-align: center;
  margin-bottom: 30px;
}

.score-section {
  text-align: center;
  margin-bottom: 40px;
}

.score {
  margin-bottom: 20px;
}

.score .number {
  font-size: 48px;
  font-weight: bold;
  color: #409EFF;
}

.score .label {
  font-size: 16px;
  color: #666;
  margin-left: 10px;
}

.level {
  font-size: 18px;
}

.level span {
  font-weight: bold;
  margin-left: 5px;
}

.level .normal { color: #67C23A; }
.level .mild { color: #E6A23C; }
.level .moderate { color: #F56C6C; }
.level .severe { color: #F56C6C; }

.evaluation-section,
.suggestions-section {
  margin-top: 30px;
}

.evaluation-section h3,
.suggestions-section h3 {
  margin-bottom: 15px;
  color: #333;
}

.suggestions-section ul {
  list-style-type: none;
  padding: 0;
}

.suggestions-section li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.suggestions-section li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #409EFF;
}

.result-footer {
  margin-top: 40px;
  text-align: center;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.ai-analysis-section {
  margin-top: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.ai-analysis-section h3 {
  color: #409EFF;
  margin-bottom: 20px;
}

.ai-part {
  margin-bottom: 20px;
}

.ai-part h4 {
  color: #666;
  margin-bottom: 10px;
}

.ai-part ul {
  list-style-type: none;
  padding: 0;
}

.ai-part li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}

.ai-part li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #409EFF;
}

.ai-content,
.ai-analysis {
  margin: 15px 0;
}

.ai-loading {
  text-align: center;
  padding: 40px 0;
}

.loading-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.analyzing-icon {
  color: #409EFF;
  animation: pulse 2s infinite;
}

.dots {
  display: flex;
  margin-left: 8px;
}

.dots span {
  width: 8px;
  height: 8px;
  margin: 0 3px;
  background-color: #409EFF;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.dots span:nth-child(2) {
  animation-delay: -0.16s;
}

.loading-text {
  color: #666;
  font-size: 14px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 80%, 100% { 
    transform: scale(0);
  }
  40% { 
    transform: scale(1);
  }
}

.ai-result {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 